<template>
  <div
    id="app"
    :class="
      song_info.id && $route.name != 'Playpage' && !show_playpage
        ? 'padding_active'
        : ''
    "
    :style="show_playpage ? 'overflow:hidden' : ''"
  >
    <router-view />

    <transition name="offset">
      <myaudio
        v-show="song_info.id && $route.name != 'Playpage'"
        @click.native="change_playpage_show"
      ></myaudio>
    </transition>

    <transition name="offset">
      <playpage
        v-show="show_playpage"
        @close="show_playpage = false"
        @prev="prev_song"
        @next="next_song"
      ></playpage>
    </transition>
  </div>
</template>

<script>
import myaudio from "./components/myaudio";
import playpage from "./components/Playpage";
import { mapState } from "vuex";
export default {
  data() {
    return {
      show_playpage: false,
    };
  },
  created() {},
  components: {
    myaudio,
    playpage,
  },
  computed: {
    ...mapState(["song_info", "play_list", "song_idx"]),
  },
  methods: {
    change_playpage_show() {
      this.show_playpage = true;
    },
    prev_song() {
      console.log("播放上一首", this.play_list[this.song_idx - 1]);
      let new_idx;
      if (this.song_idx == 0) {
        new_idx = this.play_list.length - 1;
      } else {
        new_idx = this.song_idx - 1;
      }
      let prev_id = this.play_list[new_idx];
      this.$store.commit("change_idx", new_idx);
      this.$audio.playSong(prev_id);
      this.$store.dispatch("get_song_detail", prev_id);
      this.$store.commit("changeState", true);
    },
    next_song() {
      console.log("播放下一首", this.play_list[this.song_idx - 1]);
      let new_idx;
      if (this.song_idx == this.play_list.length - 1) {
        new_idx = 0;
      } else {
        new_idx = this.song_idx + 1;
      }
      let next_id = this.play_list[new_idx];
      this.$store.commit("change_idx", new_idx);
      this.$audio.playSong(next_id);
      this.$store.dispatch("get_song_detail", next_id);
      this.$store.commit("changeState", true);
    },
  },
};
</script>
<style lang="scss">
.offset-enter,
.offset-leave-to {
  transform: translateY(50%);
  opacity: 0;
}
.offset-enter-active,
.offset-leave-active {
  transition: all 0.8s;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100vh;
  overflow: auto;
}
.padding_active {
  padding-bottom: 8vh;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
